<template>
  <div>
    <el-row>
      <el-col>
        <div id="riskChart3" :style="{width: '100%', height: '400px'}"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

  let echarts = require('echarts/lib/echarts')

  export default {
    data() {
      return {
        msg: '',
        isShow: false,
        dts: ''
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('riskChart3'));

        var markLineOpt = {};

        var option = {
          backgroundColor: '',
          title: {
            text: '',
            x: '35%',
            y: 0
          },
          xAxis: [{
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            name: '市场需求指数',
            nameLocation: 'middle',
            nameGap: 30,

          }, ],
          yAxis: [{
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            name: '竞争强度指数',
            nameLocation: 'middle',
            nameGap: 30,
          }, ],
          series: [{
            name: '强相关',
            type: 'scatter',
            xAxisIndex: 0,
            yAxisIndex: 0,
            symbol: 'circle',
            symbolSize: 40,
            label: {
              normal: {
                show: true,
                formatter: function(param) {
                  return param.data[2];
                },
              },

            },
            itemStyle: {
              normal: {
                color: '#ddc119'
              },
            },

            data: [

              [81, 82, '印度版'],

              [55.621156950336, 81.3333333333333, '荧光探针 '],
              [72.8471414092121, 72.3333333333333, '常见突变型 '],

              [39.301212507977, 62, '代购 '],
              [24.74492285746462, 26.6666666666667, '高价 '],


            ],

          },

            {
              name: '弱相关',
              type: 'scatter',
              xAxisIndex: 0,
              yAxisIndex: 0,
              symbol: 'circle',
              symbolSize: 40,
              label: {
                normal: {
                  show: true,
                  formatter: function(param) {
                    return param.data[2];
                  },
                },

              },
              itemStyle: {
                normal: {
                  // color:'#5aa8ee',
                  color: function(param) {
                    return param.data[3];
                  }
                },

              },
              data: [
                [60.7731146064041, 50, '负面 ', '#e54c4c'],
                [80.7731146064041, 60, '中立 ', '#ddc119'],
                [70.7731146064041, 20, '正面 ', '#709307'],
              ],
              markLine: markLineOpt
            }, {
              name: '访问来源',
              type: 'pie',
              radius: ['0', '38%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#1d4954'
                  }
                  ], false),
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{
                value: 335,
                name: '直接访问'
              },

              ]
            },

            {
              name: '相关背景',
              type: 'pie',
              radius: ['38%', '77%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#307065'
                  }
                  ], false),
                },
              },

              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{
                value: 3235,
                name: '直接访问'
              },


              ]
            }, {
              name: '相关背景',
              type: 'pie',
              radius: ['76%', '100%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#75ae85'
                  }
                  ], false),
                },
              },

              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [{
                value: 3235,
                name: '直接访问'
              },


              ]
            }

          ]
        };
        myChart.setOption(option);
      }
    }


  }
</script>

<style scoped>

</style>
